<template>
	<!-- 创建订单 -->
	<view class="create-order-page">
		<!-- 选择地址 -->
		<navigator v-if="goodsType!=1" url="/user_subpages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="xicon icon-dizhi"></text>
				<view class="cen" v-if="addressData.Id">
					<view class="top">
						<text class="name">{{ addressData.Name }}</text>
						<text class="mobile">{{ addressData.Mobile }}</text>
					</view>
					<text class="address">{{ addressData.Province}}{{ addressData.City }}{{ addressData.County }}
						{{ addressData.Address }}</text>
				</view>
				<view class="cen" v-else>新增收货地址</view>
				<text class="xicon icon-right"></text>
			</view>
			<!-- <image
				class="a-bg"
				src=""
			></image> -->
		</navigator>
		<!-- 地址 end-->
		<!-- 订单分组-->
		<view class="order-card-section" v-for="(orderItem,orderIndex) in orderList" :key="orderIndex">
			<view class="goods-section">
				<view class="sale-name">{{orderItem.BusinessName || ''}}</view>
				<view class="g-item" v-for="(item, index) in orderItem.glist" :key="index">
					<view class="goods-img">
						<image :src="item.Img"></image>
					</view>
					<view class="right">
						<text class="title clamp"
							style="color: #111;font-size: 28rpx;line-height: 28rpx; font-weight: bolder;">{{ item.ProductName}}</text>
						<u--text class="spec" color="#999999" size="26rpx" :lines="3"
							:text="'规格：' + item.ProductAttributeName"></u--text>
						<!-- <view>
							<text class="spec">规格：{{ item.ProductAttributeName }}</text>
						</view> -->
						<view class="price-box">
							<view class="price"><text class="symbol">￥</text> {{ item.Price }}</view>
							<view class="number" v-if="goodsType!=1">
								<uni-number-box :min="1" :value="item.Num"
									@change="numberChange($event,item,orderItem)" />
							</view>
							<view class="number" v-if="goodsType==1">
								1
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="yt-list">
				<view class="yt-list-cell desc-cell">
					<text class="cell-tit clamp">备注</text>
					<input class="desc" type="text" v-model="orderItem.OrderRemak" placeholder="请填写备注信息"
						placeholder-class="placeholder" />
				</view>

				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp text-left">小计:</text>
					<text class="cell-tip ship">￥{{ orderItem.goodsAmount }}</text>
				</view>

			</view>
		</view>
		<!-- 订单分组 end -->

		<!-- 优惠券 -->
		<view class="couponArea">
			<view class="couponTitle" v-if="this.shopCoupon.length>0">商家券</view>
			<view class="couponList" v-if="this.shopCoupon.length>0">
				<view class="couponItem" :class="{'activeCoupon': isChangeShop == index}"
					v-for="(item,index) in shopCoupon" :key='index' @click="selectCoupon(index,item)">
					<!-- {{item.CouponName}} -->
					满{{item.CouponTemple.MinimumConsumption}}减{{item.CouponTemple.FullReduceAmount}}
				</view>
			</view>
			<view class="couponTitle" v-if="this.allCoupon.length>0">平台券</view>
			<view class="couponList" v-if="this.allCoupon.length>0">
				<view class="couponItem" :class="{'activeCoupon': isChangeAll == index}"
					v-for="(item,index) in allCoupon" :key='index' @click="selectAllCoupon(index,item)">
					<!-- {{item.CouponName}} -->
					满{{item.CouponTemple.MinimumConsumption}}减{{item.CouponTemple.FullReduceAmount}}
				</view>
			</view>
			<!--
			<view class="userIntegral-box">
				<view class="">
					可用积分：
				</view>
				<view class="userIntegral-num">{{userIntegral}}</view>
			</view>-->
		</view>




		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text style="font-size: 26rpx;">实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ sunPrice }}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		forEach,
		floatAdd,
		floatMul,
		floatSub
	} from '@/utils/tools.js'
	import {
		GetUserCoupons
	} from '@/api/homePage.js'
	import {
		getAddress,
		submitOrder,
		searchShipFee,
		addProductOrders,
		delProductCar,
		getAcceptAddressList
	} from '@/api/mall.js'
	import {
		getUserIntegral
	} from '@/api/homePage.js';
	export default {
		data() {
			return {
				shopCoupon: [],
				allCoupon: [],
				useShopCoupon: '',
				useAllCoupon: '',
				isChangeShop: -1,
				isChangeAll: -1,
				goodsId: '',
				couponItem: 'couponItem',
				myCoupon: '',
				orderList: [],
				//购买商品信息
				proxy_id: 0, //分销商id
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				orderSubmit: false, // 是否允许订单提交
				couponList: [{
						title: '新用户专享优惠券',
						price: 5,
					},
					{
						title: '庆五一发一波优惠券',
						price: 10,
					},
					{
						title: '优惠券优惠券优惠券优惠券',
						price: 15,
					}
				],
				goods_ship_fee: 0, // 运费
				is_ship: true, // 是否支持送货
				addressData: {},
				subscribe: [{
					id: 'qxouXUu3NyB5gPUSf8EvKDEHxTATf-Mvh0x1i7HjDfE',
					title: '下单成功提醒',
					status: 0
				}, {
					id: 'koyI5ID5AB-LBIMvA45K0r2eGu1VaKhNcol5us6f-Po',
					title: '商品发货提醒',
					status: 0
				}], // 订阅模板消息,
				isCart: false,
				userIntegral: 0, // 用户可用积分
				goodsType: 0,
			}
		},
		filters: {
			goodsImg(e) {
				let img = JSON.parse(e)
				return img[0]
			},
		},
		computed: {
			...mapState({
				goodsInfo: state => state.shop.goodsInfo,
				goodsInfoList: state => state.shop.goodsInfoList,
				shoppingCart: state => state.shop.shoppingCart,
				userInfo: state => state.base.userInfo,
			}),
			// 不计算优惠券的价格
			defaultPrice() {
				return this.goodsInfoList.reduce((pre, cur) => {
					return floatAdd(pre, cur.goodsAmount)
				}, 0)
			},
			sunPrice() {
				let totalPrice = this.goodsInfoList.reduce((pre, cur) => {
					return floatAdd(pre, cur.goodsAmount)
				}, 0)
				// 商品券满减
				if (this.useShopCoupon && Object.keys(this.useShopCoupon).length > 0) {
					const FullReduceAmount = this.useShopCoupon?.CouponTemple?.FullReduceAmount;
					const MinimumConsumption = this.useShopCoupon?.CouponTemple?.MinimumConsumption;
					if (totalPrice >= MinimumConsumption) {
						if (totalPrice >= FullReduceAmount) {
							totalPrice -= FullReduceAmount
						} else {
							totalPrice = 0.00
						}
					}
				}
				// 平台券满减
				if (this.useAllCoupon && Object.keys(this.useAllCoupon).length > 0) {
					const FullReduceAmount = this.useAllCoupon?.CouponTemple?.FullReduceAmount;
					const MinimumConsumption = this.useAllCoupon?.CouponTemple?.MinimumConsumption;
					if (totalPrice >= MinimumConsumption) {
						if (totalPrice >= FullReduceAmount) {
							totalPrice -= FullReduceAmount
						} else {
							totalPrice = 0.00
						}
					}
				}
				//四舍五入保留两位小数
				totalPrice = Math.round(totalPrice * 100) / 100
				return totalPrice
			},
		},
		onLoad(option) {
			if (option.type) {
				this.goodsType = option.type
			}
			if (this.goodsInfoList.length === 0) {
				uni.switchTab({
					url: '/mall_subpages/mallIndex/index'
				})
				return
			}


			console.log('!!2', this.goodsInfoList)
			// this.$jwx.initJssdk()
			this.isCart = option.isCart * 1 === 1
			this.orderList = this.goodsInfoList
			this.initAddress()
			this.getCoupon()
			this.getUserIntegral()
			this.$nextTick(() => {
				this.totalPrice = this.sunPrice
			})
		},
		methods: {
			// 获取用户可用积分
			async getUserIntegral() {
				const {
					ErrorCode,
					Data
				} = await getUserIntegral()
				if (ErrorCode === "0") {
					this.userIntegral = Data
				}
			},
			//获取用户已有的优惠券
			async getCoupon() {
				const OrdersProductList11 = []
				const shopArr = []
				console.log(242, this.orderList);
				this.orderList.forEach(item => {
					item.glist.forEach(gitem => {
						OrdersProductList11.push({
							"BusinessId": item.BusinessId,
							"ProductId": gitem.ProductId,
							"ProductSpecId": gitem.ProductSpecId,
							"Count": gitem.Num,
							"RoomCount": 0,
							"SelfOrLogs": 0,
							"LocalBusinessId": 0,
							"OrderRemak": item.OrderRemak || '',
							"OrderStartDate": "",
							"OrderEndDate": "",
							"Persons": [],
							"ContactPersons": [],
							"ContactPhones": [],
							"IDCards": []
						})
						shopArr.push(gitem.BusinessId)
					})
				})

				const newArr = []
				for (var i = 0; i < shopArr.length; i++) {
					if (newArr.indexOf(shopArr[i]) == -1) {
						newArr.push(shopArr[i])
					}
				}

				try {
					const {
						Data
					} = await GetUserCoupons({
						Index: 1,
						Size: 10,
						BusinessId: this.goodsInfoList[0].BusinessId,
						CouponStatus: 1
					})
					this.myCoupon = Data;
					var b = Data
					console.log('22', b)
					var c = []
					var d = []
					for (i = 0; i < b.length; i++) {

						if (!b[i].BusinessIds) {
							c.push(b[i])
						} else {
							d.push(b[i])
						}
					}
					//筛选没过期的优惠劵
					let ShopYHJ = [];
					d.forEach(con => {
						let Starttime = Date.parse(con.EffectStartDatetime)
						let timestamp = Date.parse(con.EffectEndDatetime)
						let date = Date.parse(new Date());
						if (date < timestamp && date > Starttime) {
							ShopYHJ.push(con)
						}
					})
					this.shopCoupon = ShopYHJ;
					let AllYHJ = [];
					c.forEach(con => {
						let Starttime = Date.parse(con.EffectStartDatetime)
						let timestamp = Date.parse(con.EffectEndDatetime)
						let date = Date.parse(new Date());
						if (date < timestamp && date > Starttime) {
							AllYHJ.push(con)
						}
					})
					this.allCoupon = AllYHJ;

				} catch (e) {
					//TODO handle the exception
				}
			},
			selectCoupon(index, item) {
				if (index != this.isChangeShop) {
					console.log('!!', this.defaultPrice)
					if (item.CouponTemple.MinimumConsumption > this.defaultPrice) {
						uni.showToast({
							title: '不满足使用条件',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.isChangeShop = index
						this.useShopCoupon = item
					}
				} else {
					this.isChangeShop = -1
					this.useShopCoupon = ''
				}
			},
			selectAllCoupon(index, item) {
				if (index != this.isChangeAll) {
					console.log('!!', this.defaultPrice)
					if (item.CouponTemple.MinimumConsumption > this.defaultPrice) {
						uni.showToast({
							title: '不满足使用条件',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.isChangeAll = index
						this.useAllCoupon = item;
						console.log(item, 1)
					}
				} else {
					this.isChangeAll = -1
					this.useAllCoupon = ''
				}
			},
			// 获取收获地址
			async initAddress() {
				let parma = {
					Index: 1,
					Size: 10
				}

				try {
					const {
						Data
					} = await getAcceptAddressList(parma)

					const addr = Data.find(item => item.IsDefault === 1)

					if (addr) {
						this.addressData = addr
					}
				} catch (e) {
					//TODO handle the exception
				}

			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			numberChange(e, item, orderItem) {
				item.Num = e * 1
				orderItem.goodsAmount = orderItem.glist.reduce((pre, cur) => {
					return floatAdd(pre, floatMul(cur.Num, cur.Price))
				}, 0)
			},
			changePayType(type) {
				this.payType = type;
			},
			//授权订阅消息
			subScribeMessage() {},
			requestMsg(id) {},
			// 提交订单
			async submit() {
				if (this.goodsType != 1) {
					if (!this.addressData.Name) {
						this.$api.msg('请选择收货地址')
						return
					}
				}
				if (this.useShopCoupon && this.useShopCoupon.CouponTemple.MinimumConsumption > this.sunPrice) {
					uni.showToast({
						title: '不满足使用条件',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.useAllCoupon && this.useAllCoupon.CouponTemple.MinimumConsumption > this.sunPrice) {
					uni.showToast({
						title: '不满足使用条件',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const OrdersProductList = []
				const ProductCarIdArr = []
				console.log(405, this.orderList);
				this.orderList.forEach(item => {
					item.glist.forEach(gitem => {
						OrdersProductList.push({
							"BusinessId": item.BusinessId,
							"ProductId": gitem.ProductId,
							"ProductSpecId": gitem.ProductSpecId,
							"Count": gitem.Num,
							"RoomCount": 0,
							"SelfOrLogs": 0,
							"LocalBusinessId": 0,
							"OrderRemak": item.OrderRemak || '',
							"OrderStartDate": "",
							"OrderEndDate": "",
							"Persons": [],
							"ContactPersons": [],
							"ContactPhones": [],
							"IDCards": []
						})
						ProductCarIdArr.push(gitem.Id)
					})
				})
				console.log(2, ProductCarIdArr);
				console.log(1, OrdersProductList)
				var Coupons = []
				if (this.useShopCoupon) {
					Coupons.push({
						CouponCode: this.useShopCoupon.CouponCode,
						BusinessId: this.goodsInfoList[0].BusinessId
					})
				}
				if (this.useAllCoupon) {
					Coupons.push({
						CouponCode: this.useAllCoupon.CouponCode,
						BusinessId: 0
					})
				}
				let params = {};
				if (this.goodsType != 1) {
					params = {
						OrdersProductList,
						ProductCarIdArr: ProductCarIdArr.join(','),
						"Province": this.addressData.Province,
						"City": this.addressData.City,
						"County": this.addressData.County,
						"Address": this.addressData.Address,
						"Name": this.addressData.Name,
						"Mobile": this.addressData.Mobile,
						"Coupons": Coupons,
						"PostalCode": "",
						"Message": "",
						"PickupOrLogistic": ""
					}
				} else {
					params = {
						OrdersProductList,
						ProductCarIdArr: ProductCarIdArr.join(','),
						"Province": this.$category.appName + '语音讲解服务',
						"City": this.$category.appName + '语音讲解服务',
						"County": this.$category.appName + '语音讲解服务',
						"Address": this.$category.appName + '语音讲解服务',
						"Name": this.$category.appName + '语音讲解服务',
						"Mobile": this.$category.appName + '语音讲解服务',
						"Coupons": Coupons,
						"PostalCode": "",
						"Message": "",
						"PickupOrLogistic": ""
					}
				}
				// const params = {
				// 	OrdersProductList,
				// 	ProductCarIdArr: ProductCarIdArr.join(','),
				// 	"Province": this.addressData.Province,
				// 	"City": this.addressData.City,
				// 	"County": this.addressData.County,
				// 	"Address": this.addressData.Address,
				// 	"Name": this.addressData.Name,
				// 	"Mobile": this.addressData.Mobile,
				// 	"Coupons": Coupons,
				// 	"PostalCode": "",
				// 	"Message": "",
				// 	"PickupOrLogistic": ""
				// }
				console.log(111, params)
				// console.log('@@',this.orderList)
				uni.showLoading({
					title: '提交中..',
					mask: true
				})

				try {
					const {
						Data
					} = await addProductOrders(params)
					// console.log(111, Data)
					this.handlePay(Data, params)
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					//TODO handle the exception
				}

			},
			handlePay(Data, params) {
				const _this = this
				const param = JSON.parse(Data.WxJsApiParam)
				console.log('###', param)
				if (!param) {
					uni.reLaunch({
						url: '/mall_subpages/order/order'
					})
					return
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: param.timeStamp,
					nonceStr: param.nonceStr,
					package: param.package,
					signType: param.signType,
					paySign: param.paySign,
					success: function(res) {
						if (_this.isCart) {
							_this.clearCart(params.ProductCarIdArr)
						}
						uni.reLaunch({
							url: '/mall_subpages/order/order'
						})
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// this.$jwx.wxpay({
				// 	timestamp: param.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				// 	nonceStr: param.nonceStr, // 支付签名随机串，不长于 32 位
				// 	package: param.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
				// 	signType: param.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				// 	paySign: param.paySign, // 支付签名
				// },function(res){
				// 	if(_this.isCart) {
				// 		_this.clearCart(params.ProductCarIdArr)
				// 	}
				// 	uni.reLaunch({
				// 		url: '/subpages/order/order'
				// 	})
				// })
			},
			//清除购物车
			async clearCart(ProductCarIdArr) {
				try {
					await delProductCar({
						ProductCarIdArr
					})
				} catch (e) {
					//TODO handle the exception
				}
			},

			stopPrevent() {},
			// 运费查询
			getShipFee(add) {

			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.couponArea {
		width: 100%;
		// margin-left: 3%;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		border-radius: 10rpx;

		// padding: 20rpx;
		.couponTitle {
			color: #111;
			padding-left: 3%;
			padding-top: 20rpx;
			padding-left: 20rpx;
		}
	}

	.couponItem {
		margin-bottom: 10rpx;
		padding: 0 20rpx;
		height: 60rpx !important;
		line-height: 60rpx !important;
		border-radius: 10rpx;
		color: #FFFFFF;
		border: none;
		margin-left: 2%;
		font-size: 30rpx;
		margin-top: 20rpx;
		background-color: rgb(175, 174, 175);
	}

	.couponList {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.couponItem {
			padding: 0 20rpx;
			height: 120rpx;
			line-height: 120rpx;

			margin-left: 2%;
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.activeCoupon {
			color: snow;
			background: rgb(241, 168, 73);
		}

		// .couponItemCheck{
		// 	color: red;
		// }

	}

	.userIntegral-box {
		display: flex;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #111;
		padding-left: 3%;

		.userIntegral-num {
			color: #eb8a3e;
		}
	}

	.text-left {
		display: flex;
		justify-content: flex-end;
	}

	.create-order-page {
		min-height: 100vh;
		background: #e9e9e9;
		padding: 20rpx;
		padding-bottom: 120rpx;

		/deep/ .uni-numbox {
			height: 30px;
			line-height: 30px;

			.uni-numbox__plus,
			.uni-numbox__value,
			.uni-numbox__minus {
				height: 30px;
				line-height: 30px;
			}

			.uni-numbox__plus,
			.uni-numbox__minus {
				background: #eee;
				display: inline-block !important;
				width: 24px !important;
				height: 24px !important;
				line-height: 22px !important;
				text-align: center;

				.uni-numbox--text {
					color: #ffffff;
					display: inline-block;
				}
			}

			.uni-numbox__value {
				border: 0;
				//background: #f6f6f6;
			}
		}
	}

	.address-section {
		padding: 30rpx 0;
		background: #FFFFFF;
		position: relative;
		border-radius: 10rpx;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-dizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34rpx;
			margin-right: 24rpx;
			color: #111;
		}

		.mobile {
			color: #111;
		}

		.address {
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: $font-color-light;
		}

		.icon-right {
			font-size: 32rpx;
			color: $font-color-light;
			margin-right: 30rpx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5rpx;
		}
	}

	.order-card-section {
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.goods-section {
		margin-top: 16rpx;
		background: transparent;
		padding-bottom: 1px;

		.goods-img {


			// background: #ccc;
			border-radius: 20rpx;

			image {
				flex-shrink: 0;
				display: block;
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}

		.sale-name {
			font-weight: 600;
			font-size: 32rpx;
			padding: 20rpx 20rpx 0 20rpx;
		}

		.name {
			font-size: 30rpx;
			color: $font-color-base;
			margin-left: 24rpx;
		}


		.g-item {
			display: flex;
			padding: 20rpx 30rpx;


			.right {
				flex: 1;
				padding-left: 24rpx;
				overflow: hidden;
			}

			.title {
				font-size: 30rpx;
				color: #111;
			}

			.spec {
				font-size: 24rpx;
				color: $font-color-light;
			}

			.price-box {
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $font-color-dark;

				.price {
					.symbol {
						font-size: #eb8a3e;
					}

					font-weight: 600;
					color: #eb8a3e;
				}

				.number {
					font-size: 26rpx;
					color: snow;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16rpx;
		background: transparent;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx 10rpx 40rpx;
		line-height: 70rpx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: $font-color-light;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26rpx;
			color: $font-color-light;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
			color: #eb8a3e;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		.ship {
			color: #eb8a3e !important;
		}

		&.desc-cell {
			border-bottom: 1px dashed #eee;

			.cell-tit {
				max-width: 90rpx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40rpx;
		margin-top: 16rpx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			line-height: 1;
			height: 110rpx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80rpx;
			font-size: 40rpx;
			color: #6bcc03;
		}

		.icon-alipay {
			width: 80rpx;
			font-size: 40rpx;
			color: #06b4fd;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			font-size: 40rpx;
			color: $base-color;
		}

		.tit {
			font-size: 32rpx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90rpx;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30rpx;
		}

		.price-tip {
			color: #eb8a3e;
			margin-left: 8rpx;
			font-weight: bold;
		}

		.price {
			font-size: 44rpx;
			color: #eb8a3e;
			font-weight: bold;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280rpx;
			height: 100%;
			color: #fff;
			font-size: 32rpx;
			background: #00BFFF !important;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: 0.3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, 0.4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}

		.title {
			font-size: 32rpx;
			color: $font-color-dark;
			margin-bottom: 10rpx;
		}

		.time {
			font-size: 24rpx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: $font-color-base;
			height: 100rpx;
		}

		.price {
			font-size: 44rpx;
			color: $base-color;

			&:before {
				content: '￥';
				font-size: 34rpx;
			}
		}

		.tips {
			font-size: 24rpx;
			color: $font-color-light;
			line-height: 60rpx;
			padding-left: 30rpx;
		}

		.circle {
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6rpx;
			}
		}
	}
</style>
